<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jss = jQuery + CSS</title>
		<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="lib/cssilly/cssilly.js"></script>
		<style type="text/cssilly">
			@import "style.css";
		</style>
    </head>
    <body>
        <h1>JavaScript fixed CSS</h1>
		<div class="parent">
			This is the parent
			<div class="child">
				And this is the direct child. Now let's test .parent > .child
				<div class="child subchild">
					This should have blue borders, while it's parent, red
				</div>
			</div>
		</div>
		
		<div class="parent">
			<div class="child">
				<pre>The first paragraph after this text should be italic. <a href="#" onclick="jQuery('pre', '.parent').after('<p>Some dynamically inserted paragraph</p>');return false">Insert between</a></pre>
				<p>Some text for the paragraph.</p>
			</div>
		</div>

		<div class="parent">
			<div class="child">
				This input should have blue border: <input type="text" value="some input"><br>
				This password input should have red border: <input type="password" value="some input"><br>				
			</div>
		</div>

		<div class="parent">
			<div class="child">
				<p class="class1">This paragraph shoud be small</p>
				<p class="class2">This paragraph shoud be underlined</p>
				<p class="class1 class2">This paragraph shoud be small, underlined and green</p>				
			</div>
		</div>
    </body>
	<!-- <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> -->
</html>
